<template>
	<div>
		<div>
			<van-nav-bar title="车主服务" />
		</div>
		<div style="padding: 0px 13px">
			<p style="font-size: 25px; text-align: left;">车主服务</p>
			<van-grid :column-num="4">
				<van-grid-item @click="gotoPage('/service/reservation')">
					<img src="@/assets/service/appoint.png" alt="" style="width: 20px;">
					<p style="font-size: 18px">维保预约</p>
				</van-grid-item>
				<van-grid-item @click="gotoPage('/service/record')">
					<img src="@/assets/service/history.png" alt="" style="width: 20px;">
					<p style="font-size: 18px">维保历史</p>
				</van-grid-item>
			</van-grid>
		</div>
		<div>
			<van-tabbar v-model="active" route>
				<van-tabbar-item to='/community'>
					<span>社区</span>
					<template slot="icon">
						<img src="@/assets/tabbar/community.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/analysis'>
					<span>数据分析</span>
					<template slot="icon">
						<img src="@/assets/tabbar/analysis.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/home'>
					<template slot="icon">
						<img src="@/assets/tabbar/home.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/service'>
					<span>服务</span>
					<template slot="icon">
						<img src="@/assets/tabbar/service.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/mine'>
					<span>我的</span>
					<template slot="icon">
						<img src="@/assets/tabbar/mine.png">
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'service',
		data() {
			return {
				active: '/service'
			}
		},
		methods: {
			gotoPage(path){
				this.$router.push({path})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
